{template 'header'}
<script type="text/javascript">
    var myScroll;

    function loaded() {
        myScroll = new iScroll('wrapper', {
            snap: true,
            momentum: false,
            hScrollbar: false,
            onScrollEnd: function () {
                document.querySelector('#indicator > li.active').className = '';
                document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
            }
        });

    }

    document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<body id="cate6">

<div>
		<div id="wrapper">
			<div id="scroller">
				<ul id="thelist"> 

				</ul>
			</div>
		</div>
		<div id="nav">
			<div id="prev" onclick="myScroll.scrollToPage('prev', 0,400,3);return false">&larr; prev</div>
			<ul id="indicator">


			</ul>
			<div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next &rarr;</div>
		</div>
		<div class="clr"></div>
</div>
		
        <div id="insert1"></div>
       <ul  class="mainmenu">
		   {php $index=0}
		   {loop $navs $nav}
                {php $indexli=$index%4}
				<li class="li{$indexli}">
                    <a href="{$nav['url']}">
                    <div class="menubtn">
                    <div class="menumesg">
                    <div class="menutitle">{$nav['name']}</div>
                    <div class="menuico"></div>
                    </div>
                    <div class="menuimg"><img src="./resource/attachment/{$nav['icon']}" /><div class="menutext">{$nav['name']}</div></div>
                    </div>
                    </a>
                </li>
           {php $index++}
			{/loop}
 	
<div class="clr"></div>
</ul>
<script>
    var count = document.getElementById("thelist").getElementsByTagName("img").length;
    var count2 = document.getElementsByClassName("menuimg").length;

    for(i=0;i<count;i++){
        document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";
    }
    for(i=0;i<count2;i++){
        if(i==0||i==4||i==8||i==12){
            document.getElementsByClassName("menuimg").item(i).style.cssText = " HEIGHT:"+(document.body.clientWidth/320)*111+"px";
            document.getElementsByClassName("menumesg").item(i).style.cssText = " HEIGHT:"+(document.body.clientWidth/320)*111+"px";
        }else{
            document.getElementsByClassName("menuimg").item(i).style.cssText = " HEIGHT:48px";
            document.getElementsByClassName("menumesg").item(i).style.cssText = " HEIGHT:48px";
        }
    }

    document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";


    setInterval(function(){
        myScroll.scrollToPage('next', 0,400,count);
    },3500 );

    window.onresize = function(){
        for(i=0;i<count;i++){
            document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";

        }
        for(i=0;i<count2;i++){

            if(i==0||i==4||i==8||i==12){
                document.getElementsByClassName("menuimg").item(i).style.cssText = " HEIGHT:"+(document.body.clientWidth/320)*111+"px";
                document.getElementsByClassName("menumesg").item(i).style.cssText = " HEIGHT:"+(document.body.clientWidth/320)*111+"px";
            }else{
                document.getElementsByClassName("menuimg").item(i).style.cssText = " HEIGHT:48px";
                document.getElementsByClassName("menumesg").item(i).style.cssText = " HEIGHT:48px";
            }
        }

        document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";
    }

</script>
{template 'footer'}
